import './index.less';
import {Link} from 'umi'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Button, Dropdown, MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu } from 'antd';
import React, { useState } from 'react';
import { NavLink } from 'react-router-dom';
import 'antd/dist/antd.css';


const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const menu = (
  <Menu
    items={[
      {
        key: '1',
        label: (
          <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
             新建文章-协同编辑器
          </a>
        ),
      },
      {
        key: '2',
        label: (
          <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
            新建文章
          </a>
        ),
      },
      {
        key: '3',
        label: (
          <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
            新建页面
          </a>
        ),
      },
    ]}
  />
);

const items: MenuItem[] = [
  getItem( <h2 className='h2s' style={{marginLeft:40,marginTop:20}}>管理后台</h2> , '15', ),

  getItem('', 'sub2', [
    <Dropdown overlay={menu} placement="bottomLeft">
    <Button className='btnins'>
         <p><b>+</b> 新建</p>
    </Button>
  </Dropdown>
  ]),

  getItem(<Link to={'/index/workbench'}>工作台</Link> , '1', <PieChartOutlined />),
  
  getItem('文章管理', 'sub1', <UserOutlined />, [
    getItem( <Link to={'/index/allarticle'}>所有文章</Link>, '2'),
    getItem( <Link to={'/index/labelticle'}>分类管理</Link>, '3'),
    getItem( <Link to={'/index/typearicle'}>标签管理</Link>, '4'),
  ]),
 
  getItem(<Link to={'/index/pagemanage'}>页面管理</Link>, '5', <FileOutlined />),
  getItem(<Link to={'/index/knowledge'}>知识小册</Link>, '6', <FileOutlined />),
  getItem(<Link to={'/index/management'}>海报管理</Link>, '7',<FileOutlined />),
  getItem(<Link to={'/index/poster'}>评论管理</Link> , '8', <FileOutlined />),
  getItem(<Link to={'/index/mail'}>邮件管理</Link>, '9', <FileOutlined />),
  getItem(<Link to={'/index/file'}>文件管理</Link>, '10', <FileOutlined />),
  getItem(<Link to={'/index/searchrecords'}>搜索记录</Link>, '11', <FileOutlined />),
  getItem(<Link to={'/index/access'}>访问统计</Link> , '12', <FileOutlined />),
  getItem(<Link to={'/index/usermanage'}>用户管理</Link>, '13', <FileOutlined />),
  getItem(<Link to={'/index/system'}>系统设置</Link> , '14', <FileOutlined />),
];


export default function IndexPage(props:any) {
  console.log(process.env.UMI_ENV_REQUEST_URL,'UMI_ENV_REQUEST_URL')

  const [collapsed, setCollapsed] = useState(false);

  return (
      
    
<div className='indexs' >
   <Layout>
     
      <Sider  collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
          
       <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
      </Sider>
   
      <Layout className="site-layout">
          <div className='ffoters'>
      
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => setCollapsed(!collapsed),
          })}
       
      </div>
        <Content
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          {
            props.children
          }
        </Content>
      </Layout>
    </Layout>
    <div>
          
      </div>
    </div>
  );
}
